<template>
  <div style="display: flex">
    <navigation :style="getNavigationWidth" class="navigation"></navigation>
    <div :style="getMainMarginLeftAndWidth">
      <top :style="{height:'50px',position:'fixed','z-index':99,backgroundColor:'#fff'}"></top>
      <router-view
        style="padding: 20px;margin-top:50px"
        v-loading="showLoadingGetters"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading">
      </router-view>
    </div>
  </div>
</template>

<script>
import navigation from './navigation'
import top from './top/index'
import {mapGetters} from 'vuex'

export default {
  name: 'home',
  components: {navigation, top},
  data () {
    return {
      navigationOpenWidth: '200px',
      navigationCloseWidth: '67px'
    }
  },
  computed: {
    ...mapGetters([
      'showSliderGetters',
      'showLoadingGetters'
    ]),
    getNavigationWidth () {
      return this.showSliderGetters ? {width: this.navigationOpenWidth} : {width: this.navigationCloseWidth}
    },
    getMainMarginLeftAndWidth () {
      return this.showSliderGetters ? {marginLeft: this.navigationOpenWidth, width: `calc(100% - ${this.navigationOpenWidth})`}
        : {marginLeft: this.navigationCloseWidth, width: `calc(100% - ${this.navigationCloseWidth})`}
    }
  }
}
</script>

<!-- overflow-y: auto 导航栏的滚动条 -->
<!-- ::-webkit-scrollbar 设定滚动条样式 -->
<style scoped>
  .navigation{
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    background-color:#304156;
  }
  ::-webkit-scrollbar {
    display: none;
  }
</style>
